<script>
    let accountComponent =  {
        template: `
      <div class="tally-account-component-box" style="width: 100%">
     <div class="el-row" style="padding-bottom:20px;">
        
        <div class="el-col el-col-8 el-col-xs-24">
            <div style="background: rgb(241, 82, 58);position: relative;border-radius: 4px;padding: 20px;margin: 0 5px;height: 140px;box-sizing: border-box;color: #fff;font-size: 14px;">
                <h1 style="font-size:32px;font-weight: bold;">{{ accountSummary.asset_net }}</h1>
                <div class="value">净资产</div>
                <hr />
                <span style="float:left">资产：{{ accountSummary.asset }}</span>
                <span style="float:right">负债：{{ accountSummary.debt }}</span>
            </div>
        </div>
        <div class="el-col el-col-8 el-col-xs-24">
            <div style="background: rgb(64, 158, 255);position: relative;border-radius: 4px;padding: 20px;margin: 0 5px;height: 140px;box-sizing: border-box;color: #fff;font-size: 14px;">
                <h1 style="font-size:32px;font-weight: bold;">{{ counts.inRemain }}</h1>
                <div class="value">应收余额</div>
                <hr />
                <span style="float:left">应收总额：{{ counts.inAll }}</span>
                <span style="float:right">已收金额：{{ counts.inAlready }}</span>
            </div>
        </div>
        <div class="el-col el-col-8 el-col-xs-24">
            <div style="background: rgb(103, 194, 58);position: relative;border-radius: 4px;padding: 20px;margin: 0 5px;height: 140px;box-sizing: border-box;color: #fff;font-size: 14px;">
            <h1 style="font-size:32px;font-weight: bold;">{{ counts.outRemain }}</h1>
                <div class="value">应付余额</div><hr />
                <span style="float:left">应付总额：{{ counts.outAll }}</span>
                <span style="float:right">已付金额：{{ counts.outAlready }}</span>
            </div>
        </div>
   </div>
        <p style="margin-bottom: 15px;">
            <span class="contentH3">账户列表 </span>
            <span class="contentP3">（如果账目不平请点击右侧按钮进行重新核算）</span>
            <el-button v-if="currentTally.role!='viewer'" type="success" size="mini" @click="reCheck" class="frBtn ml10"><i class="el-icon-c-scale-to-original" /> 重新核算</el-button>
            <el-button v-if="currentTally.role!='viewer'" type="primary" size="mini" @click="refreshAccount" class="frBtn"><i class="el-icon-refresh" /> 刷新余额</el-button>
            <el-button v-if="currentTally.role!='viewer'" type="danger" size="mini" @click="accountFormShow=true;tallyAccountForm={};" class="frBtn"><i class="el-icon-plus" /> 新增账户</el-button>
&nbsp;
        </p>
        <div class="clearfix"></div>
        <div>
            <template>
                <el-table
                        :data="accountList"
                        type="index"
                        stripe
                        border
                        show-summary
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.2)"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="名称" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="initial_money"
                            label="初始金额" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="当前余额" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="tag"
                            label="标签" sortable>
                    </el-table-column>
                    <el-table-column
                            prop="memo"
                            label="备注">
                    </el-table-column>
                    <el-table-column label="排序" v-if="currentTally.role!='cashier' && currentTally.role!='viewer'" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-top" circle @click="sorting(1,scope.row.id)"></el-button>
                            <el-button type="danger" size="mini" icon="el-icon-bottom" circle @click="sorting(2,scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" v-if="currentTally.role!='cashier' && currentTally.role!='viewer'" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="editTallyAccount(scope.row)"></el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteAccountRow(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <div>
        <!--账户编辑表单框------>
        <account-form :dialogShow="accountFormShow" :formRow="tallyAccountForm"  @modalClose="modalClose"></account-form>
        <!--账户重新核算表单框------>
        <el-dialog title="账户重新核算" :visible.sync="dialogReCheck">
          <el-form :model="reForm" label-width="100px">
            <el-form-item :label="item.title" v-for="(item,index) in accountList"
                              :key="item.id">
                <el-input :value="item.initial_money" class="reInput" size="small" disabled>
                <template slot="prepend">初始：</template>
                </el-input>
                <el-input :value="item.money" class="reInput" size="small" disabled>
                <template slot="prepend">当前：</template>
                </el-input>
                <el-input v-model="item.re_money" class="reInput" size="small">
                <template slot="prepend">重新核算：</template>
                </el-input>
                <span style="color:green" v-if="item.re_money == item.money">金额一致</span>
                <el-button type="primary" v-if="item.re_money != item.money"
                    @click="accountReSet(item,index)" size="small">更新余额</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        </div>
    </div>
    `,
        computed: {
            currentTally () {
                return this.$store.state.currentTally
            },
            accountList() {
                return this.$store.state.accountList
            },
            accountTags() {
                return this.$store.state.accountTags
            },
            currentTallyId() {
                return this.$store.state.currentTallyId
            }
        },
        data:function(){
            return {
                tallyAccountForm : {},
                dialogReCheck:false,
                accountFormShow:false,
                loading:false,
                reForm:{},
                accountSummary:{
                    asset_net : 0.00 ,
                    asset : 0.00 ,
                    debt : 0.00 ,
                },
                counts:{
                    inRemain:0,
                    outRemain:0,
                },
            }
        },
        watch: {
            dialogReCheck:{
                handler (newVal) {
                    if(!newVal) {
                        this.$store.dispatch('getAccountList',this.currentTallyId)
                    }
                },
                deep:true,
                immediate: true
            }
        },
        mounted () {
            this.getAccountSummary()
            this.getCount()
        },
        methods:{
            sorting(type,id){
                console.log(type)
                console.log(id)
                let that = this
                axios.post('/api/account/sorting',{tally_id:that.currentTallyId,id:id,sortingtype:type},{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.$store.dispatch('getAccountList',that.currentTallyId).then((res)=>{
                            that.loading = false
                        })
                        that.$message({
                            type: 'success',
                            message: '调整成功'
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            getAccountSummary() {
                let that = this
                axios.post('/api/account/summary',{tally_id:that.currentTallyId},{
                     headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.accountSummary = res.data.data
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            getCount(){
                let that = this
                axios.get('/api/tally-arap/count',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params:{
                        tally_id:that.currentTallyId,
                        begin_date:'',
                        end_date:'',
                        page:1
                    },
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.counts = res.data.data
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            modalClose(){
                this.accountFormShow = false
            },
            editTallyAccount(row){
                this.tallyAccountForm = JSON.parse(JSON.stringify(row))
                this.accountFormShow = true
            },
            deleteAccountRow(row){
                let that = this
                this.$confirm('确定要删除该行：'+row['title'], '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            let postUrl = '/api/account/del'
                            axios.post(postUrl,{id:row['id'],tally_id:that.currentTallyId},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status === 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '操作成功~'
                                    })
                                    that.$store.dispatch('getAccountList', that.currentTallyId)
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '解析数据失败:'+res.data.error_message
                                    })
                                }
                            })
                        }
                    }
                });
            },
            reCheck(){
                let that = this
                this.$confirm('重新计算账户余额，方便您进行账目校对', '重新核算', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            that.dialogReCheck = true
                            axios.post('/api/account/re-check',{tally_id:that.currentTallyId},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                res.data.data.forEach(function (rItem, rIndex) {
                                    for (let ai=0;ai<that.accountList.length;ai++){
                                        if(that.accountList[ai].id === rItem.id){
                                            that.accountList[ai].re_money = rItem.debt
                                            that.$set(that.accountList, ai, that.accountList[ai])
                                            break;
                                        }
                                    }
                                })
                            })
                        }
                    }
                });
            },
            refreshAccount(){
                console.log('refreshAccount')
                let that = this
                that.loading = true
                that.$store.dispatch('getAccountList',that.currentTallyId).then((res)=>{
                    that.loading = false
                })
            },
            accountReSet(account,aIndex){
                let that = this
                let postUrl = '/api/account/set-money'
                axios.post(postUrl,{
                    id:account.id,
                    tally_id:that.currentTallyId,
                    money:account.re_money,
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.$message({
                            type: 'success',
                            message: '操作成功~'
                        })
                        that.accountList[aIndex].money = account.re_money
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            }
        }
    }
</script>
<style>
    .ml10{margin-left: 10px;}
    .reInput{width: 180px;}
    .contentP3{font-size: 13px;}
    .el-input-group__append, .el-input-group__prepend{
        padding: 0 10px;
    }
</style>
